<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- Import style -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="https://unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="https://unpkg.com/element-plus"></script>
    <link rel="stylesheet" href="./css/3.css" />
</head>

<body>
    <div id="app">
        <el-card class="card" v-for="stu in stus">
            <template #header>
                <div class="card-header">
                    <span><el-avatar :size="50" :src="stu.avatar" /></span>
                    <span class="name">{{stu.name}}</span>
                </div>
            </template>
            <div>
                <p>年龄：{{stu.age}}</p>
                <p>性别：{{stu.sex}}</p>
                <p>总分：{{stu.score.yw+stu.score.sx+stu.score.yy}} </p>
                <!-- <p>总分：{{Number(stu.score.yw)+Number(stu.score.sx)+Number(stu.score.yy)}} </p> -->
            </div>
            <el-tooltip placement="bottom" v-if="stu.score.yw>=60&stu.score.sx>=60&stu.score.yy>=60">
                <template #content>
                    <p>语文：{{stu.score.yw}}</p>
                    <p>数学：{{stu.score.sx}}</p>
                    <p>英语：{{stu.score.yy}}</p>
                </template>
                <el-button>查看成绩单</el-button>
            </el-tooltip>
        </el-card>
        <div class="addBtn">
            <el-button size="large" type="primary" @click="openDrawer">新增</el-button>
        </div>
        <el-drawer v-model="show" size="500" title="新增成绩" :with-header="true">
            <el-form :model="form">
                <el-form-item label="姓名">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="form.age" type="number" />
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="form.sex" placeholder="请选择性别">
                        <el-option v-for="item in sexList" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="语文">
                    <el-input v-model.number="form.score.yw" type="number" />
                </el-form-item>
                <el-form-item label="数学">
                    <el-input v-model.number="form.score.sx" type="number" />
                </el-form-item>
                <el-form-item label="英语">
                    <el-input v-model.number="form.score.yy" type="number" />
                </el-form-item>
                <el-form-item>
                    <el-button @click="form = null">重置</el-button>
                    <el-button type="primary" @click="submit">提交</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</body>
<script>
    const App = {
        data() {
            return {
                sexList: [{ label: '男', value: '女', }, { label: '女', value: '女', },],
                show: false,
                stus: [
                    { name: '张三', age: 20, sex: '男', score: { yw: 80, sx: 89, yy: 90 }, avatar: './img/avatar' + Math.floor(Math.random() * 10) + '.png', },
                    { name: '李四', age: 20, sex: '男', score: { yw: 88, sx: 46, yy: 74 }, avatar: './img/avatar' + Math.floor(Math.random() * 10) + '.png', },
                    { name: '王五', age: 20, sex: '男', score: { yw: 60, sx: 77, yy: 87 }, avatar: './img/avatar' + Math.floor(Math.random() * 10) + '.png', },
                    // Math.random() 静态方法返回一个大于等于 0 且小于 1 的伪随机浮点数，并在该范围内近似均匀分布，然后你可以缩放到所需的范围。
                    // Math.floor() 函数总是返回小于等于一个给定数字的最大整数。
                ],
                report: {},
                form: { name: '', age: 0, sex: '', score: { yw: 0, sx: 0, yy: 0 }, avatar: './img/avatar' + Math.floor(Math.random() * 10) + '.png', },
            };
        },
        methods: {
            openDrawer() {
                this.show = true;
            },
            submit() {
                // this.form.avatar = './img/avatar' + Math.floor(Math.random() * 10) + '.png';
                this.stus.push(this.form);
                this.show = false;
                this.form = { name: '', age: 0, sex: '', score: { yw: 0, sx: 0, yy: 0 }, avatar: './img/avatar' + Math.floor(Math.random() * 10) + '.png', };
            },
        },
    };
    Vue.createApp(App).use(ElementPlus).mount('#app');
</script>

</html>